<template>
  <div class="nav-wrapper">
     <div class="back" @click="backClick">
        <img src="~assets/img/common/back.svg">
     </div>
     <MiniTabbar class="tab" :tabberList="tabberList"></MiniTabbar>
     <div class="back"></div>
  </div>
</template>

<script>
// 导入子组件
import MiniTabbar from 'components/Minitabbar/minitabbar.vue'


export default {
  name: 'detailtopnav',
  props: {
    tabberList: {
		    type: Array,
      default: () => {
        return ['商品', '参数', '评论', '推荐']
      }
    },
  },
  components: {
    MiniTabbar
  },
  methods: {
    backClick() {
      this.$router.back()
    }
  },
}
</script>

<style lang='stylus' scoped>
.nav-wrapper
   display flex
   width 100%
   height 44px
   .back
     width 60px
     text-align center
     img
       margin-top 12px
   .tab
     padding 0 20px
     flex 1
     height 44px
     line-height 44px
     // 深度选择器 我们这里需要更改子组件的样式
     /deep/ span
       padding 0
</style>